<template>
  <div>
    <div class="search-container">
      <el-input style="width: 70%" type="text" v-model="searchQuery" placeholder="输入英文关键词……"
                @keyup.enter.native="searchImages(1)"/>
      <el-button @click="searchImages(1)">Search</el-button>
    </div>
    <image-list v-loading="isLoading" v-if="imageList.length > 0 || isLoading" :images="imageList"
                :total-images="imageCount" @page-changed="searchImages"/>
    <no-images v-else/>
  </div>
</template>

<script>
import {selectPicture} from "@/http/home/picture/get";
import ImageList from "../label/picture/ImageList.vue";
import NoImages from "../label/picture/NoImages.vue";

export default {
  components: {ImageList, NoImages},
  data() {
    return {
      imageList: [],
      searchQuery: 'dog', // 初始搜索查询
      isLoading: false,
      imageCount: 0,
    };
  },
  methods: {
    searchImages(page) {
      this.isLoading = true;
      selectPicture(this.searchQuery, page).then(res => {
        if (res.data.code == 200) {
          this.imageList = res.data.data.data
          this.$message.success(res.data.msg);
          this.imageCount = res.data.data.count
        } else {
          this.$message.error(res.data.msg);
        }
      }).finally(() => {
        this.isLoading = false; // 确保在请求结束后总是设置isLoading为false
      });
    }
  },
};
</script>

<style scoped>
.search-container {
  padding: 8px;
  margin-bottom: 20px;
  border: 1px solid #ddd;
  border-radius: 4px;
  display: flex;
  justify-content: space-between;
  width: 30%;
  //justify-content: center; /* 居中对齐容器中的元素 */
}

.search-container .el-input {
  width: 20%; /* 或者使用具体的像素值，例如 '300px' */
  /* ...其他样式保持不变... */
}

/* 其他样式保持不变 */
</style>
